<template>
    <div>
        <div>Search：<input type="text" v-model="searchVal" placeholder="请输入搜索内容"></div>
        <table>
            <thead>
                <tr>
                    <th 
                        v-for="(item,i) in columns"
                        :key="i"
                        @click="sortFun(item)"
                        :class="{active:sortKey === item}"
                        >
                        {{item}} <span class="arrow" :class="sortOrder[item]>0?'asc':'dsc'"></span>
                        </th>
                </tr>
            </thead>
            <tbody>
                <tr 
                    v-for="(item,i) in filterData"
                    :key="i"
                    >
                    <td
                        v-for="(key,ind) in columns"
                        :key="ind"
                    >
                    {{item[key]}}
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>
<script>
export default {
    props:{
        columns:Array,
        sourceData:Array
    },
    data(){
        let sortOrder = {};//排序规则
        this.columns.forEach(key=>{
            sortOrder[key] = 1
        })
        return {
            searchVal:'',//模糊搜索关键字
            sortOrder,//排序规则
            sortKey:''//排序key
        }
    },
    methods:{
       sortFun(key){
           this.sortKey = key;//保存点的key
           this.sortOrder[key] = this.sortOrder[key] * -1;//改变排序规则
       }
    },
    computed:{
        filterData(){
            let sourceData = this.sourceData;
            //搜索
            let searchVal = this.searchVal&&this.searchVal.toLowerCase();//不区分大小写
            if(searchVal){
                sourceData = sourceData.filter(item=>{
                    return Object.keys(item).some(key=>{
                        return String(item[key]).toLowerCase().indexOf(searchVal) > -1
                    })
                })
            }
            //排序
            if(this.sortKey){
                sourceData.sort((a,b)=>{
                    a = a[this.sortKey];
                    b = b[this.sortKey];
                    return (a===b ?0 :a>b?1:-1) * this.sortOrder[this.sortKey]
                })
            }
            return sourceData
        }
    }
}
</script>
<style lang="scss" scoped>
 div{
     input{
         width: 250px;
         height: 35px;
         border: 1px solid #ddd;
         padding-left: 10px;
         border-radius: 3px
     }
     table{
        border: 2px solid #00bdaa;
        border-radius: 3px;
        margin-top: 10px;
        th{
            background: rgba($color: #f6d186, $alpha: 0.8);
            color: #ccc;
            cursor: pointer;
            user-select: none;
            &.active{
                color: #fff
            }
        }
        th,td{
            text-align: center;
            min-width: 120px;
            padding: 10px 15px
        }
        td{
            background: #f7f7f8;
            color: #666;
            font-size: 14px
        }
        .arrow{
            display: inline-block;
            width: 0;
            height: 0;
            &.asc{
                border-left: 4px solid transparent;
                border-right: 4px solid transparent;
                border-bottom: 5px solid #fff
            }
            &.dsc{
                border-right: 4px solid transparent;
                border-left: 4px solid transparent;
                border-top: 5px solid #fff
            }
        }
    }
 }
    
</style>